<style lang="less">
	.form .el-col {
	    margin-bottom: 0;
	}
</style>
<template>
  <div>
    <div>
      <el-row>
        <el-col :span="24">
          <el-form
            ref="details"
            :model="details"
            label-width="150px"
            size="mini"
            inline
            label-position="right"
          >
            <el-col :span="24">
              <el-col :span="10">
                <el-form-item :label="$t('labelSpec.listTable.labelObject') + ':'">
                  <span
                    v-for="item in labelObject"
                    v-if="details.labelObject == item.item_code"
                  >{{ item.item_text }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item :label="$t('labelSpec.listTable.labelUpdateFrequency') + ':'">
                  <span
                    v-for="item in labelUpdateFrequency"
                    v-if="details.labelUpdateFrequency == item.item_code"
                  >{{ item.item_text }}</span>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="10">
                <el-form-item :label="$t('labelSpec.listTable.labelCode') + ':'">
                  <span>{{ details.labelCode }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item :label="$t('labelSpec.listTable.labelDatasSource') + ':'">
                  <span
                    v-for="item in labelDatasSource"
                    v-if="details.labelDatasSource == item.item_code"
                  >{{ item.item_text }}</span>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="10">
                <el-form-item :label="$t('labelSpec.listTable.labelName') + ':'">
                  {{ details.labelName }}
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item :label="$t('labelSpec.listTable.labelDataCol') + ':'">
                  {{ details.labelDataCol }}
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('labelSpec.listTable.labelLevelId') + ':'">
                <el-col>
                  <span
                    v-for="item in dialogOptions"
                    v-if="details.labelLevelId == item.labelLevelId"
                  >{{ item.labelLevelPathNameDialog }}</span>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-col :span="10">
                <el-form-item :label="$t('labelSpec.listTable.labelValueType') + ':'">
                  <span
                    v-for="item in labelValueType"
                    v-if="details.labelValueType == item.item_code"
                  >{{ item.item_text }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item :label="$t('labelSpec.listTable.labelDataType') + ':'">
                  <span
                    v-for="item in labelDataType"
                    v-if="details.labelDataType == item.item_code"
                  >{{ item.item_text }}</span>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col v-if="details.labelValueType=='2000'" :span="24">
              <el-form-item :label="$t('labelSpec.listTable.labelValues') + ':'">
                <span
                  v-for="(tag,index) in details.labelValues"
                  :key="index"
                >
                  <span v-if="index > 0">,</span>
                  {{ tag.labelValue }}-->{{ tag.labelValueName }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-col :span="10">
                <el-form-item :label="$t('labelSpec.listTable.statusCd') + ':'">
                  <span
                    v-for="item in labelStatusCd"
                    v-if="details.statusCd == item.item_code"
                  >{{ item.item_text }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item :label="$t('labelSpec.listTable.statusDate') + ':'">
                  {{ details.statusDate }}
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="10">
                <el-form-item :label="$t('labelSpec.listTable.createStaffName') + ':'">
                  {{ details.createStaffName }}
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item :label="$t('labelSpec.listTable.createDate') + ':'">
                  {{ details.createDate }}
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="10">
                <el-form-item :label="$t('labelSpec.listTable.businessDesc') + ':'">
                  {{ details.businessDesc }}
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item :label="$t('labelSpec.listTable.itDesc') + ':'">
                  {{ details.itDesc }}
                </el-form-item>
              </el-col>
            </el-col>
          </el-form>
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="130px"
            size="mini"
            inline
            label-position="right"
          >
            <el-col v-if="modelType=='submitAudit'" :span="24">
              <el-col :span="24">
                <el-form-item :label="$t('labelSpec.listTable.createStaffName') + ':'" prop="auditStaff">
                  <!-- <el-input v-model="form.auditStaff" :placeholder="$t('labelSpec.placeholder.auditStaffHint')"></el-input> -->
                  <el-select v-model="form.auditStaff" style="width: 130px;" filterable :placeholder="$t('labelSpec.placeholder.auditStaffHint')">
                    <el-option
                      v-for="item in userAll"
                      :key="item.staffId"
                      :label="item.staffName"
                      :value="item.staffId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label="$t('labelSpec.listTable.applyRemark') + ':'" prop="applyRemark">
                  <el-input
                    v-model="form.applyRemark"
                    maxlength="500"
                    type="textarea"
                    :placeholder="$t('labelSpec.placeholder.applyRemarkHint')"
                  />
                </el-form-item>
              </el-col>
            </el-col>
            <el-col v-if="modelType=='audit'" :span="24">
              <el-col :span="24">
                <el-form-item :label="$t('labelSpec.listTable.auditResult') + ':'" prop="statusCd">
                  <el-radio
                    v-for="item in labelStatusCd"
                    v-if="item.item_code == '1400' || item.item_code == '1500'"
                    v-model="form.statusCd"
                    :label="item.item_code"
                  >{{ item.item_text }}</el-radio>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label="$t('labelSpec.listTable.auditRemark') + ':'" prop="auditRemark">
                  <el-input
                    v-model="form.auditRemark"
                    maxlength="500"
                    type="textarea"
                    :placeholder="$t('labelSpec.placeholder.auditRemarkHint')"
                  />
                </el-form-item>
              </el-col>
            </el-col>
            <el-col v-if="modelType!='detail'" :span="24" style="padding-left: 100px;">
              <el-button type="primary" @click="onSubmit" v-text="$t('submit')" />
              <el-button @click="onClose" v-text="$t('close')" />
            </el-col>
          </el-form>
        </el-col>
      </el-row>
      <el-divider />
    </div>
    <div v-if="modelType=='edit' || modelType=='detail'" class="block" style="padding-bottom: 10px;">
      <div>
        <p style="font-size: 18px;color: #303133;">{{ $t('labelSpec.ulog') }}</p>
        <p v-for="(item , index) in activities" style="margin-left: 20px;">
          <span>{{ index + 1 }}、</span><span v-text="actDateFormat(item.statusDate)" /><span> {{ item.operateDesc }}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { dateFormat } from '@/utils/date'
export default {
  name: 'SepecDetail',
  props: {
	    dialogOptions: {
	        type: Array,
	        default: []
	    },
	    modelType: {
	        type: String,
	        default: ''
	    },
	    labelId: {
	        type: Number,
	        default: 0
	    },
	    labelObject: {
	        type: Array,
	        default: []
	    },
	    labelUpdateFrequency: {
	        type: Array,
	        default: []
	    },
	    labelDatasSource: {
	        type: Array,
	        default: []
	    },
	    labelValueType: {
	        type: Array,
	        default: []
	    },
	    labelDataType: {
	        type: Array,
	        default: []
	    },
    labelStatusCd: {
	        type: Array,
	        default: []
	    }
  },
  data() {
    return {
      details: {},
      reverse: false,
      activities: [],
      userAll: [],
      rules: {
        applyRemark: [
				  { required: true, message: this.$t('labelSpec.rules.applyRemark'), trigger: 'blur' },
				  { min: 1, max: 500, message: this.$t('labelSpec.rules.applyRemarkLength'), trigger: 'blur' }
        ],
        auditStaff: [
				  { required: true, message: this.$t('labelSpec.rules.auditStaff'), trigger: 'blur' }
        ]
      },
      audit: {
        statusCd: [
				  { required: true, message: this.$t('labelSpec.rules.statusCd'), trigger: 'blur' }
        ],
        auditRemark: [
				  { required: true, message: this.$t('labelSpec.rules.auditRemark'), trigger: 'blur' },
				  { min: 1, max: 500, message: this.$t('labelSpec.rules.auditRemarkLength'), trigger: 'blur' }
        ]
      },
      defaultValue: {
        applyRemark: '',
        auditStaff: '',
        statusCd: '1400'
      },
      form: {
        applyRemark: '',
        auditStaff: ''
      },
      details: {
      },
      labelAuditLogBean: {}
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.form = this.defaultValue
      this.getLabelDetails()
      if (this.modelType == 'audit') {
        this.rules = this.audit
      } else if (this.modelType == 'submitAudit') {
        this.getUserAll()
      }
    },
    actDateFormat(data) {
      return dateFormat(new Date(data))
    },
    getLabelDetails() {
      const that = this
      this.R.forTaglib.get('/mktlabel/details/' + this.labelId).then(res => {
			   if (res.ok) {
				   that.form.labelId = res.labelId
				   that.details = res
				   that.details.statusDate = this.actDateFormat(res.statusDate)
				   that.details.createDate = this.actDateFormat(res.createDate)
				   that.activities = res.labelLogs
				   if (this.modelType == 'audit') {
            that.labelAuditLogBean = res.labelAuditlog[res.labelAuditlog.length - 1]
            console.log(that.labelAuditLogBean)
				   }
			   }
      })
    },
    getUserAll() {
      const that = this
      this.R.forTaglib.get('/mktlabel/queryUserList').then(res => {
        if (res.ok) {
				   that.userAll = res.userList
        }
      })
    },
    onSubmit() {
      if (this.modelType == 'audit') {
        this.labelAuditLogBean.auditResult = this.form.statusCd
        this.labelAuditLogBean.auditRemark = this.form.auditRemark
        this.form.labelAuditLogBean = this.labelAuditLogBean
      } else {
        this.labelAuditLogBean = {}
        this.form.statusCd = 1300
        this.labelAuditLogBean.applyRemark = this.form.applyRemark
        this.labelAuditLogBean.auditStaff = this.form.auditStaff
        this.form.labelAuditLogBean = this.labelAuditLogBean
      }

      this.$refs.form.validate(valid => {
        if (valid) {
          this.R.forTaglib.postJson('/mktlabel/editLabelStatus', this.form).then(res => {
            if (res.ok) {
              this.$message.success(this.$t('saveSuccess'))
              this.$emit('onDetailSuccess', true)
            }
          }).catch(err => {
            this.$message.error(err.toString())
          })
        }
      })
    },
    onClose() {
      this.$emit('onDetailSuccess', true)
    }
  }
}
</script>

